<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link href="/static/css/default.css" rel="stylesheet" type="text/css">
    <link href="/static/css/style/green.css" rel="stylesheet" type="text/css" id='link'>
</head>

<body style="overflow:hidden; padding:10px;">
    <form>
        <table class="formtable" style="width:580px;" id="app">

            <tbody>

                <tr>
                    <td class="tlabel">学生列表</td>
                    <td>
                       <div id="studentlist"></div> 
                    </td>
                </tr>

                <tr>
                    <td class="tlabel">班级选择</td>
                    <td>
                        <select type="text" id="chooseclassid"  class="select" >
                            <option value="">
                                请选择
                               </option>
                               <option v-for="item in list" :value='item.id'>
                                {{item.classname}}
                               </option>
                           </select>
                    </td>
                </tr>
             





            </tbody>

        </table>

        <div class="formbtn">
            <input type="button" value="提交" class="btnsave">
            <input type="button" value="取消" class="btncancel">
        </div>
        <input type="hidden" id="classid" value="{$classid}" />
    </form>


</body>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/js/vue2.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script>
   
    var menu = new Vue({
        el: '#chooseclassid',
        data: {
            list: []
        },
        methods: {
            getdata: function () {
                var _self = this;//保存this的指向

                $.get('/Index/Myclass/GetMyClassList', function (data) {
                    var classid =$("#classid").val();
                    var items =[];
                    for(var i=0;i<data.length;i++){
                        if(data[i].id!=classid){
                            items.push(data[i]);

                        }
                    }
                    _self.list = items;
                });
            }

        },
        created: function () {  //初始化事件里边去调用查询方法
            this.getdata();
        }
    });

    $(function () {
        var classid =$("#classid").val();
        $.post("/Index/Student/GetStudentList",{"classid":classid},function(data){
                var html ="";
                for(var i=0;i<data.length;i++){
                    html+="<input name='student' type='checkbox' value='"+data[i].id+"' > "+data[i].truename
                }

                $("#studentlist").html(html);

        });
        $(".btnsave").click(function () {
            var students = [];
            $("[name=student]:checked").each(function () {
                students.push($(this).val())
            });
            students = students.join(',');
            var classid =$("#classid").val();
            var chooseclassid =$("#chooseclassid").val();

           

            $.post("/Index/Myclass/zhuanban", { "students": students, "classid": classid,"chooseclassid":chooseclassid}, function (data) {
                if (data.status == 200) {

                    layer.msg(data.message);
                    var index = parent.layer.getFrameIndex(window.name);
                    window.parent.iframe.contentWindow.location.reload(true);
                    console.log(window.parent.iframe);
                    parent.layer.close(index);
                } else {
                    layer.msg(data.message);
                }
            });
        });
        $(".btncancel").click(function () {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });
    });


</script>

</html>